<template>
<div class="product-wrap">
    <van-nav-bar class="header fixed" :title="goodsInfo.sort_title" left-text="返回" left-arrow @click-left="navBack" @click-right="shareShow = true" style="z-index: 99">
        <van-icon slot="right" class-prefix="iconfont" name=" icon-31fenxiang" color="#1989fa" />
    </van-nav-bar>
    <van-swipe :autoplay="3000" indicator-color="white" style="top: 44px;">
        <van-swipe-item v-for="(image,index) in images " :key="index">
            <img style="height: 350px;width: 100%;" :src="image">
        </van-swipe-item>
    </van-swipe>
    <div v-if="images == null" style="width: 100%;height:300px;line-height: 300px;">
        <h1 style="text-align:center;">暂无图片</h1>
    </div>
    <div style="padding:22.5px;"></div>
    <div class="product-info clearfix">
        <div class="msg l">
            <span class="price">{{ goodsInfo.price | money }}</span>

            <span class="original_price"> {{ goodsInfo.original_price | money }}</span>
        </div>
        <div class="like r">
            <div class="item" @click="like">
                <van-icon name="like-o" /><span>收藏</span>
            </div>
        </div>
    </div>
    <div v-if="is_branch" class="title" style="margin-top: -5px;padding-bottom: 5px;font-size:14px;color: #fb8691;font-weight: 300;">
        <span style="font-size: 20px;">{{ goodsInfo.member_price | money }} </span> <span style="color: #999">代发价</span>
    </div>
    <div class="title"> {{ goodsInfo.title}}</div>
    <div class="sub-title">
        <p v-if="goodsInfo">{{ goodsInfo.sort_title }}</p>
    </div>
    <van-cell-group>
        <!-- <van-cell>
                <div slot="title">
                    <span style="color: #999">已选</span>
                    <span>黑色</span>
                </div>
                <van-icon slot="right-icon" name="ellipsis" style="line-height: inherit;" />
            </van-cell> -->
        <van-cell>
            <div slot="title" class="detail_serve_item">
                <van-icon name="checked" />平台发货 & 商家发货
            </div>
            <van-icon slot="right-icon" name="ellipsis" style="line-height: inherit;" />
        </van-cell>
    </van-cell-group>
    <van-tabs v-model="active">
        <van-tab title="商品介绍">
            <div style="hieght: 100px;width: 100%;" v-html="goodsInfo.remark"></div>
        </van-tab>
        <van-tab title="产品规格">
            <van-cell :title="item.title" :value="item.value" v-for="(item,index) in params" :key="index" />
        </van-tab>
        <van-tab title="售后保障" style="background-color: white;padding:10px 15px;">
            <van-divider>权利声明</van-divider>
            <p style="display: block;">无忧商城上的所有商品信息、客户评价、商品咨询、网友讨论等内容，是无忧商城重要的经营资源，未经许可，禁止非法转载使用。</p>
            <van-divider>价格声明</van-divider>
            <p>商品促销信息以商品详情页“促销”栏中的信息为准；商品的具体售价以订单结算页价格为准；如您发现活动商品售价或促销信息有异常，建议购买前先联系销售商咨询。</p>
        </van-tab>
    </van-tabs>
    <!-- Start 商店信息 store -->
    <div class="footer fixed" style="z-index: 99">
        <van-goods-action>
            <van-goods-action-icon icon="chat-o" text="客服" @click="getservice" />
            <!-- <van-goods-action-icon icon="cart-o" text="购物车"" @click="cart" /> -->
            <van-goods-action-button v-if="is_branch" type="danger" text="一键代发" @click="getcart('branch')" />
            <van-goods-action-button v-else type="warning" text="立即购买" @click="getcart('buy')" />
        </van-goods-action>

    </div>
    <van-sku v-model="selectCartShow" :sku="sku" :goods="goodsInfo" :goods-id="goodsInfo.id" :hide-stock="hide_stock"  @buy-clicked="getBuy" :close-on-click-overlay="true" :show-add-cart-btn="false" :hide-selected-text="false" />
    <!-- @add-cart="onAddCartClicked" -->

    <van-popup
    v-model="shareShow"
    position="bottom"
    >
    <div class="share">
        <div class="text-center" @click="getShare('friend')">
            <van-icon class-prefix="iconfont" name=" icon-weixin" color="#07c160" size="3rem"  />
            <p>分享给朋友</p>
        </div>
        <div class="text-center" @click="getShare('friends')">
            <van-icon class-prefix="iconfont" name=" icon-pengyouquan" color="#07c160" size="3rem"  />
            <p>分享到朋友圈</p>
        </div>
    </div>

    </van-popup>
    <div v-if="overlayShow" class="overlay fixed text-center" @click="overlayShow = false">
        <h2>请点击右上角分享 <span class="rightshare"><van-icon class-prefix="iconfont" name=" icon-zhixiangshang" size="5rem" /></span> </h2>
    </div>
</div>
</template>

<script>
import {
    Lazyload,
    Toast,
    Sku
} from 'vant';
import goodsVue from '../store/mine/goods.vue';
export default {
    name: "productStore",
    inject: ['reload'],
    data() {
        return {
            active: 0,
            goodsInfo: null,
            storeInfo: null,
            is_branch: false,
            images: [],
            cartData: [],
            selectCartShow: false,
            sku: {
                tree: [],
                // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
                list: []
            },
            params: [],
            goodsId: 1,
            hide_stock: false,
            shareShow:false,
            overlayShow: false
        };
    },
    created() {
        this.cartData = this.$store.state.cartData;
        this.images = JSON.parse(this.global.state.productStore_goods.images);
        this.goodsInfo = this.global.state.productStore_goods;
        this.goodsInfo.picture = this.goodsInfo.avatar;
        this.storeInfo = this.$route.params.storeInfo || this.global.state.storeInfo;
        this.storeInfo.parent_id != 0 ? this.is_branch = true : this.is_branch = false;
        this.params = JSON.parse(this.goodsInfo.params);
        this.formatType(this.goodsInfo.type);
        this.sku.price = this.goodsInfo.price;
        this.sku.stock_num = this.goodsInfo.is_inventory ? this.goodsInfo.inventory : 9999;
        if (typeof (this.goodsInfo.type) != 'object') {
            this.sku.collection_id = this.goodsInfo.id;
            this.sku.none_sku = true
        }
        this.formatPrice(this.goodsInfo.spec_price, 'price');
    },
    methods: {
        formatPrice(data, type) {
            let newData = [];
            Object.keys(data).forEach((key) => {
                let spec = data[key].spec.substring(0, data[key].spec.length - 1)
                let specData = spec.split(',');
                if (type === 'price') {
                    let si = {
                        id: data[key].id,
                        price: data[key].price * 100,
                        stock_num: data[key].count ? data[key].count : 999
                    }
                    specData.forEach((v, i) => {
                        si['s' + i] = v;
                    })
                    newData.push(si);
                }

            })
            this.sku.list = newData;
        },
        formatType(data) {
            let newData = [];
            Object.keys(data).forEach((key) => {
                let spec = [];
                Object.keys(data[key].spec).forEach((i) => {
                    let sp = {
                        id: data[key].spec[i].title,
                        name: data[key].spec[i].title
                    }
                    spec.push(sp)
                })
                let item = {
                    k: data[key].title,
                    v: spec,
                    k_s: 's' + key
                }
                newData.push(item);
            })
            this.sku.tree = newData;
        },
        navBack() {
            this.$router.go(-1);
        },
        getservice() {
            //客服
            Toast('暂无此功能');
        },
        getcart(e) {
            if (e == 'branch') {
                let storeInfo = this.storeInfo;
                let goodsInfo = this.goodsInfo;
                goodsInfo.price = goodsInfo.price;
                this.global.state.singleGoods = goodsInfo;
                this.$router.push({
                    name: 'orderSubmit',
                    path: '../order/submit'
                });
            }
            this.selectCartShow = true;
        },
        getBuy(e) {
            this.global.state.BuyGoodsData = e;
            let storeInfo = this.storeInfo;
            let goodsInfo = this.goodsInfo;
            this.global.state.singleGoods = goodsInfo;
            this.$router.push({
                name: 'orderSubmit',
                path: '../order/submit',
                query:{good: e.selectedSkuComb ? true : false}
            });
        },
        cart() {
            this.$router.push({
                name: 'cart',
                path: '../cart'
            });
        },
        onAddCartClicked(item) {
            this.selectCartShow = false;
            item.goodsInfo = this.goodsInfo;
            item.store = this.storeInfo;
            if (item.selectedSkuComb) {
                item.checkSpec = item.selectedSkuComb;
                item.collection_id = item.selectedSkuComb.id;
            } else {
                item.collection_id = this.goodsInfo.id;
            }
            item.number = item.selectedNum ? item.selectedNum : 1
            this.$store.commit('addcartGoods', item);
            Toast.success('添加成功');
        },
        goShare(){
            this.overlayShow = true
        },
        getShare(t){
            let links = `${location.origin}/?goods_id=${this.goodsInfo.id}`
            let share = new this.wxShare(this.goShare);
            let option = {
                title: document.title,
                desc: this.goodsInfo.sort_title,
                link: links,
                imgUrl: this.images[0] || null
            };
            if(t == 'friend'){
                // overlayShow
                const shareRes = share.config(1,option);                
                shareRes.then(res=>console.log(res)).catch(err=>console.log(err))
            }else {
                const shareRes = share.config(2,option);
                shareRes.then(res=>console.log(res)).catch(err=>console.log(err))
            }
        },
        async like(){
            let params = {
                id: this.goodsInfo.id,
                token: sessionStorage.getItem('token')
            };
            const res = await this.axios.post('/api/store/user/favorite/create/Good',params);
            Toast(res.data.message);
        }

    }
};
</script>

<style scoped>
.product-wrap {
    padding-bottom: 100px;
}

.product-wrap .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0
}

.product-wrap .title {
    font-size: 15px;
    font-weight: 600;
    padding: 0 12px;
    background: white;
    box-sizing: border-box;
}

.product-wrap .sub-title {
    font-size: 12px;
    padding: 0 12px;
    background: white;
    box-sizing: border-box;
    color: #999;
    margin-bottom: 5px;
}

.product-wrap .sub-title p {
    padding: 0.25rem 0;
    margin: 0;
}

.product-info {
    box-sizing: border-box;
    padding: 10px 12px;
    background: white;
    line-height: 24px;
}

.product-info .like {
    max-width: 150px;
}

.product-info .msg .price {
    font-size: 24px;
    line-height: 24px;
    color: #ff4240;
}
.red {
    color: #ff4240;
}
.product-info .msg .original_price {
    text-decoration: line-through;
    color: #999;
}

.product-info .item {
    text-align: center;
    display: inline;
    margin: 0 5px;
    line-height: 12px;
}

.product-info .item span {
    color: #999;
    font-size: 12px;
}

.product-info .item p {
    margin: 0;
}

.detail_serve_item i {
    color: #ff4240;
}

.evaluate-header {
    background: white;
    padding: 0 12px 5px;
}

.evaluate-header-item {
    margin: 0 10px 10px 0;
    background: #fdf0f0;
    display: inline-block;
    margin: 5px 5px 0 5px;
    padding: 0 10px;
    height: 25px;
    border-radius: 3px;
    line-height: 25px;
    font-size: 10px;
    font-family: -apple-system, Helvetica, sans-serif;
    color: #666;
}

.evaluate-item {
    box-sizing: border-box;
    padding: 0 12px;
    margin: 10px 0 5px;
}

.evaluate-item-header,
.evaluate-item-header .time {
    line-height: 20px;
}

.evaluate-item-header .name,
.evaluate-item-header .i {
    padding-left: 5px;
    vertical-align: 50%;
}

.evaluate-item-header .van-rate {
    padding-left: 5px;
    display: inline-block;
    vertical-align: 50%;
}

.evaluate-item-container p {
    margin: 0;
}

.evaluate-item-container img {
    display: inline-block;
    max-width: 19%;
    margin-right: 1%;
}

.product-wrap .all {
    text-align: center;
}

.product-wrap .all span {
    padding: 2px 10px;
    border-radius: 10px;
    border: 1px solid #666;
    line-height: 14px;
    vertical-align: 70%;
}

.product-wrap .store {
    box-sizing: border-box;
    background: white;
    padding: 5px 12px;
    margin: 5px 0;
}

.store .title {
    padding: 0;
}

.store .name div {
    display: inline-block;
}

.store .info div p {
    margin: .25rem 0;
    text-align: center;
}

.store .info .info p {
    text-align: center;
    font-size: 12px;
}

.store-tool div button {
    display: block;
    width: 98%;
    margin: 0 2%;
}

.share {
    display: flex;
    flex-wrap: nowrap;
    justify-content:space-between;
    padding: .75rem 0
}
.share div {
    width: 50%;
}
.share div p {
    margin: .25rem 0;
}

.overlay {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2099;
    height: 100vh;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    transition:  .5s;
}

.overlay h2 .rightshare {
    display: inline-block;
    transform: translate(5rem, -2rem) rotate(20deg)
}
</style>
